<!--好友列表-->
<template>

  <div class="">
      <!-- 搜索框，查找用户 -->
      <label class="input input-bordered flex items-center gap-2 w-full">
        <input type="text" class="grow" v-model="keyword" @focusout="clickSearch" placeholder="搜索用户名" />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" /></svg>
      </label>

<!-- v-if="userList.length===0"-->
      <!-- 联系人列表 -->
      <table class="table">
        <!-- head -->
        <thead>
        <tr>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <template v-for="it in userList">
          <!-- row 1 -->
          <tr>
            <td @click="clickInto(it)">
              <div class="flex items-center gap-3">
                <div class="avatar online placeholder">
                  <div class="rounded-full w-12">
                    <img :src="it.avatarUrl" alt="Avatar" oncontextmenu="return false"/>
                  </div>
                </div>
                <div>
                  <div class="font-bold">{{ it.nickname }}</div>
                </div>
              </div>
            </td>
          </tr>
        </template>
        </tbody>
      </table>

      <!--展示用户信息-->
      <div v-if="activeContact!=null" class="card w-96 bg-base-100 shadow-xl">
        <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" oncontextmenu="return false"/></figure>
        <div class="card-body">
          <div class="avatar">
            <div class="w-24 mask mask-squircle">
              <img :src="activeContact.avatarUrl" oncontextmenu="return false" />
            </div>
          </div>

          <h2 class="card-title">{{activeContact.aliasName?activeContact.aliasName:activeContact.nickname}}</h2>
          <span v-if="activeContact.gender===1"><IconMale/></span>
          <span v-if="activeContact.gender===2"><IconFemale/></span>
          <span>昵 称 {{activeContact.nickname}}</span>
          <span>账号名 {{activeContact.username}}</span>
          <p>{{activeContact.profile}}</p>
          <div class="card-actions justify-center">
            <button class="btn btn-ghost btn-sm" @click="clickMessage">发消息</button>
            <button class="btn btn-ghost btn-sm" @click="clickVoice">语音</button>
            <button class="btn btn-ghost btn-sm" @click="clickVideo">视频</button>
          </div>

          <div class="card-actions justify-center ">
            <button class="btn btn-info btn-sm" @click="clickApply">加好友</button>
            <button class="btn btn-ghost btn-sm" @click="clickBlack">拉 黑</button>
          </div>
        </div>
      </div>

    </div>

</template>

<script setup>
import {inject, onMounted, onUnmounted, ref} from "vue";
import 'element-plus/es/components/message/style/css';
import 'element-plus/es/components/message-box/style/css';
import {ElMessage} from 'element-plus'
import {useChatStore} from "@/stores/chat.js";
import IconMale from "@/components/icons/IconMale.vue";
import IconFemale from "@/components/icons/IconFemale.vue";
import UserApi from "@/api/user.js"

const toRoute = inject('toRoute')

const chatStore = useChatStore()

const activeContact = ref(null);

const keyword = ref('');

const userList = ref([])

onMounted(() => {
  window.addEventListener('keydown', clickKeydown)
});
onUnmounted(() => {
  window.removeEventListener('keydown', clickKeydown, false)
})

const clickKeydown = (event) => {
  if (event.keyCode === 13) {
    clickSearch();
  }
}
const clickSearch = () => {
  // console.log("搜索："+keyword.value +" ... "+ new Date())
  const kw = keyword.value.trim();
  if (kw.length>2){
    findUser(kw)
  }
}

const clickInto = (it) => {
  console.log(`click contact: nickname=${it.nickname}`);
  activeContact.value = it;
}


const clickMessage = () => {
  console.log(`clickMessage...`);

  chatStore.obtainChatting(activeContact.value)

  toRoute("/chats")
}
const clickVoice = () => {
  console.log(`clickVoice...`);

}
const clickVideo = () => {
  console.log(`clickVideo...`);

}

const clickApply = async () => {
  console.log(`clickApply...`);
  await UserApi.applyFriend(activeContact.value.userId)
  ElMessage.success("已申请添加好友,等待对方同意")
}
const clickBlack = () => {
  console.log(`clickBlack...`);

}

function findUser(kw){
  UserApi.searchUser(kw).then(resp => {
    userList.value = resp.data
  })
}
/*function obtainChatContext(chatUser){
  console.debug("obtainChatContext ... ");

  let chatContext = chatStore.getChatContextByChatUserId(chatUser.uid);
  if (!chatContext) {
    console.debug("createChatContext ... ");
    chatContext = chatStore.createChatContext(chatUser);
  } else {
    console.debug("without createChatContext ... ");
  }
  chatStore.addOrMoveToFirstChatterList(chatContext);
}*/

</script>

<style lang="scss" scoped>

</style>